<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: sans-serif!important;
        }
        
        a {
            text-decoration: none;
        }
        ul li{
            list-style: none;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            -webkit-tap-highlight-color: transparent;
            font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
        }
        
        .wrap {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            background-color: #F6F6F6;
        }
        /*头部*/
        
        .wrap header {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 45px;
            box-sizing: border-box;
            background-color: #fff;
            position: relative;
            box-shadow: 0 0px 5px #888;
        }
        
        .wrap header::after {
            content: '';
            display: block;
            position: absolute;
            border: 1px solid #ccc;
            left: 0;
            right: 0;
            bottom: 0;
            transform-origin: 100% 100%;
            transform: scaleY(.5);
        }
        
        .wrap header a.back {
            color: #10AEFF;
            display: block;
            position: relative;
            margin-left: 40px;
            font-size: 18px;
        }
        
        .wrap header a.back::before {
            content: '';
            display: block;
            width: 25px;
            height: 25px;
            background: url() center no-repeat;
            background-size: cover;
            position: absolute;
            left: -21px;
        }
        
        .wrap header a.saoma {
            width: 25px;
            height: 25px;
            background: url();
            background-size: cover;
            margin-right: 20px;
        }
        /*中部*/
        
        .wrap .main {
            width: calc(100% - 45px);
            box-shadow: 0 0 10px #ccc;
            margin: 0 auto;
            box-sizing: border-box;
            margin-top: 25px;
            background-color: #fff;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
        }
        .main div:not(.car-num):not(.text), .main p{
            margin-top: 30px;
        }
        .main .car-num {
            width: 288px;
            height: 135px;
            background: url(https://common.ofo.so/newdist/daa967f224530707a6fec557d033ff2e.png) no-repeat;
            background-position: center center;
            background-size: cover;
        }
        .main .money-dec{
            background-color: #eee;
            padding: 0 10px ;
            border-radius: 70px;            
        }
        .main .input{
         width: 100%;
        }
        .main .input .text, .main .input .btn{
            display: inline-block;
            vertical-align: middle;
            /*margin-left: 10px;*/
        }
         .main .input button.active{
            background-color: #ffd500;
        }

        .main .input .text{
            width:65%;
            height: 60px;
            border: 2px solid #ffd500;
            text-align: center;
            color:black;
            line-height: 60px;
            position: relative;
        }

        /*光标*/
        .main .input .text::before{
            content: attr(data-content);
        }
       
        .main .input .text::after{
            content: '';
            border-right: 2px solid #ffd500;
            height: 50%;
            opacity: 1;
            animation: focus .7s forwards infinite;
        }

        /*闪烁动作*/
        @keyframes focus {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }
        .main .input .btn{
            width: 60px;
            height: 60px;
             outline: none;
            border: none;
            background: url() no-repeat center;
            background-color: #eee;
            
            
        }
        .main .input-dec{
            
        }
        footer table{
            width: 100%;
            height: 215px;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0; 
            text-align: center;
            border: 1px solid #dedfe2;
            border-collapse: collapse;
            background-color: #fff;
            
        }
        footer table tr td{
            width: 25%;
        }
        footer table tr:last-child td:nth-child(2n+1){
            background-color: #f6f6f6;
        }
        footer table tr:nth-child(3) td:last-child{
            background-color: #dedfe2;
        }
        footer table tr:first-child td:last-child{
            background: url() no-repeat center ;
            background-size: 20px 20px;
        }
        footer table tr:nth-child(2) td:last-child{
            background: url() no-repeat center;
            background-size: 20px 20px;
        }
       
    </style>
</head>

<body>
    <div class="wrap">
        <header>
            <a href="javascript:;" class="back">返回</a>
            <h3>ofo 共享单车</h3>
            <a href="javascript:;" class="saoma"></a>
        </header>
        <div class="main">
            <div class="car-num">

            </div>
            <p class="money-dec">计费说明：1元/小时</p>
            <div class="input">
                <div type="text" class="text" id="text" data-content=""></div>
                <button class="btn " id="submitBtn"></button>
            </div>
            <p class="input-dec">输入车牌号,获取解锁码</p>

        </div>
        <footer>
           <table width="100%" border="1" cellspacing="0" cellpadding="0">
               <tboby>
                   <tr>
                       <td class="number">1</td>
                       <td class="number">2</td>
                       <td class="number">3</td>
                        <td></td>
                   </tr>
                   <tr>
                       <td class="number">4</td>
                       <td class="number">5</td>
                       <td class="number">6</td>
                        <td id="del"></td>
                   </tr>
                   <tr>
                       <td class="number">7</td>
                       <td class="number">8</td>
                       <td class="number">9</td>
                       <td rowspan="2">确认</td>
                   </tr>
                   <tr>
                       <td></td>
                       <td class="number">0</td>
                       <td></td>
                        
                   </tr>
               </tboby>
           </table>
        </footer>
    </div>
    <script>
    
    // 获取页面元素
    const content = document.querySelector('.main .input .text'),
          numbers = document.querySelectorAll('.number'),
          submitBtn = document.getElementById('submitBtn'),
          del = document.getElementById('del');
    // 结果值
    let value = '';
    
    // 删除按钮点击事件
    del.addEventListener('click',function(){
        if(value.length == 0) return false;
        value = value.slice(0,value.length - 1);
        dataSet(value);  
    });

    // 添加至dataSet中
    function dataSet(value){
        content.setAttribute('data-content',value);
        if(value.length > 0){
            submitBtn.classList.add('active');
        }else{
            submitBtn.classList.remove('active');
        }
    };

    // 数字按钮点击事件
    numbers.forEach(function(element) {
        element.addEventListener('click',function(){
            value += this.innerHTML;
            dataSet(value);
        })
    }, this);
    
    </script>
</body>

</html>